<template>
	<div class="personal-center-container">
		<header v-if="orgOpen && !isOutsideOrg" class="current-department">
			<van-cell
				:title="`${
					$t('personalCenter.CurrentLogin', '当前登录') + $t('personalCenter.organization', '组织') ||
					'当前登录组织'
				}`"
				:to="isOutsideOrg ? '' : '/changeOrg?oneDep=' + oneDept + '&labelId='"
				is-link
				:value="userInfo.cur_dept?.dept_name"
				@click="changeOutsideOrg"
				class="van-cell-tit"
			>
				<template #label v-if="isOutsideOrg">
					<Label labelId="3" :labelName="userInfo.label" />

					<span class="org-id" style="margin-left: 6px"
						>ID：{{ userInfo.department_id }}</span
					>
				</template>
			</van-cell>
			<div style="height: 20px" v-if="isOutsideOrg"></div>
		</header>
		<main class="personal-detail">
			<van-cell-group class="personal-detail__basic">
				<van-cell
					:title="
						isOutsideOrg
							? 'ID'
							: $t('personalCenter.OrganizationAccount', '组织账号')
					"
					:value="userInfo.employee_id"
					clickable
				/>
				<van-cell
					:title="
						isOutsideOrg
							? $t('personalCenter.fullName', '姓名')
							: $t('personalCenter.AddressBookName', '通讯录姓名')
					"
					:value="userInfo.employee_name"
					clickable
				/>
				<van-cell
					:title="
						isOutsideOrg
							? $t('personalCenter.cellPhoneNumber', '手机号')
							: $t('personalCenter.JobNo', '工号')
					"
					:value="isOutsideOrg ? userInfo.phone : userInfo.employee_card"
					clickable
				/>
				<van-cell
					:title="
						isOutsideOrg
							? $t('personalCenter.Email', '邮箱')
							: $t('personalCenter.post', '职务')
					"
					:value="isOutsideOrg ? userInfo.email : userInfo.sequence"
					clickable
				/>
			</van-cell-group>
			<van-cell-group class="personal-detail__department">
				<section v-if="!isOutsideOrg">
					<div v-if="onDept && (oneDept || isDept)">
						<van-cell
							:title="
								newOrgOpen
									? $t('personalCenter.Department', '组织')
									: $t('personalCenter.Department', '部门')
							"
							:is-link="administrationList.rows?.length > 2 ? true : false"
							:value="
								administrationList.rows?.length > 2
									?  $t('pages.home.viewAll', '查看全部')
									: ''
							"
							value-class="cell-value"
							clickable
							:to="
								administrationList.rows?.length > 2
									? '/changeOrg?oneDep=true&labelId=1'
									: ''
							"
						>
							<template #label>
								<ul>
									<li
										v-for="(item, index) in administrationList &&
										administrationList.rows"
										:key="index"
									>
										<span class="department-content a1">{{
											item.dept_name_path
										}}
										</span>
										<span
											class="orgType"
											v-if="item.main_dept_flag && !ifshowMain"
											>（{{ $t('personalCenter.main', '主') }}）</span
										>
										<span
										    class="org-utype"
										    v-if="!item.main_dept_flag && ifshowMain"
										>（{{ $t('personalCenter.partTime', '兼') }}）</span
									    >
									</li>
								</ul>
							</template>
						</van-cell>
					</div>
				</section>
				<section v-else>
					<van-cell
						:title="$t('personalCenter.Organization', '所在组织')"
						clickable
					>
						<template #label>
							<ul class="outside-org-list">
								<li v-for="(item, index) in outsideColumns" :key="index">
									<div>
										<Label labelId="3" :labelName="item.dept_type_name" />

										<span class="org-id">ID：{{ item.dept_id }}</span>
									</div>
									<span class="department-content a4">{{
										item.dept_name
									}}</span>
								</li>
							</ul>
						</template>
					</van-cell>
				</section>
			</van-cell-group>
		</main>
		<footer class="logout" v-if="isOutLoginButton">
			<van-button type="default" size="large" block @click="logout">{{
				$t('personalCenter.LogOut', '退出登录')
			}}</van-button>
		</footer>
		<van-popup v-model:show="showPicker" round closeable position="bottom">
			<h1>{{ $t('personalCenter.selectLoginDepartment', '请选择登录部门') }}</h1>
			<van-picker
				ref="picker"
				:columns="outsideColumns"
				visible-item-count="4"
				item-height="44"
				:show-toolbar="false"
				:default-index="nowIndex"
			/>

			<div class="btn" @click="changDepartment">
				{{ $t('personalCenter.determine', '确认') }}
			</div>
		</van-popup>
	</div>
</template>

<script lang="ts" setup>
import { ref, onMounted,computed } from 'vue'
import { apiInit } from '@/services'
import { useStore } from 'vuex'
import Label from './changeOrg/components/Label.vue'
// import { t } from '@/entry_mobile/locales/index'
import { i18n } from '@/locales'
const { $t } = i18n
import { getBrowserType } from '@byteluck-fe/global-shared'
const isVirOrg = !!JSON.parse(localStorage.getItem('tenantDetail')!).data
	.tenant_auth.user_org_switch
const store = useStore()
const api = apiInit()
const isOutLoginButton = ref(false)
let userInfo: Object = store.state.userInfo
let isOutsideOrg: boolean = store.state.userInfo.org_type === 'EXTERNAL'
let orgOpen: boolean = store.state.tenant.tenant_auth.user_org_switch
//新业务组织
let newOrgOpen: boolean = store.state.tenant.tenant_auth.biz_org

let businessList: any = ref({ rows: [] })
let administrationList: any = ref({ rows: [] })
let showPicker = ref(false)
let outsideColumns: any = ref([])
let picker = ref()
const nowIndex = ref(1)
const tenantDetail: any = ref({})
//部门样式选择
const businessDeptHide = ref()
const deptHide = ref()
const isBtmOrg = ref()
const onDept: any = ref(false)
const oneDept: any = ref(false)
const isDept: any = ref(true)
const ifshowMain = computed(   
			() => store.state.tenant.security_config_map.main_lable_hide
		)
const changeOutsideOrg = async () => {
	if (isOutsideOrg) {
		showPicker.value = true
	}
}
const changDepartment = async () => {
	let res = await api.baseAuto.SwitchDeptExternalEmployeePrivateV1POST({
		query: {
			employeeId: (picker.value as any).getValues()[0].employee_id,
		},
	})
	if (res) {
		window.location.reload()
	}
}
const logout = () => {
	history.go(-history?.length)
	window.location.replace(process.env.VUE_APP_LOGOUT)
}

const fetchOrgList = async (labelId: string) => {
	let res = await api.baseAuto.PageInternalMulDeptPrivateV1POST({
		payload: {
			dept_name_like: '',
			employee_id: '',
			label_id: labelId,
			page_index: 1,
			page_size: 3,
			tenant_id: '',
		},
	})
	return res
}
onMounted(async () => {
	tenantDetail.value = JSON.parse(
		localStorage.getItem('tenantDetail') || ''
	).data
	if (getBrowserType() === 'WebBrowser') {
		isOutLoginButton.value = true
	} else {
		isOutLoginButton.value = false
	}
	if (isOutsideOrg) {
		let { data } = await api.baseAuto.ListExternalMulDeptPrivateV1POST({})
		outsideColumns.value = data
		let i = 0
		outsideColumns.value.forEach((item: any) => {
			i++
			item.text = item.dept_name + '(' + item.dept_id + ')'
			item.index = i
		})
		let nowVale = outsideColumns.value.filter((item: any) => {
			return item.dept_id === userInfo.department_id
		})
		nowIndex.value = nowVale[0].index - 1
	} else {
		fetchOrgList('2').then(data => {
			businessList.value = data
		})

		fetchOrgList('1').then(data => {
			administrationList.value = data
		})
	}
	isBtmOrg.value = tenantDetail.value.tenant_auth.user_org_switch
	deptHide.value = !tenantDetail.value.security_config_map.dept_hide
	businessDeptHide.value =
		!tenantDetail.value.security_config_map.business_dept_hide
	if (isBtmOrg.value) {
		if (deptHide.value) {
			if (businessDeptHide.value) {
				onDept.value = true
				oneDept.value = false
				isDept.value = true
			} else {
				onDept.value = true
				oneDept.value = true
			}
		} else {
			if (businessDeptHide.value) {
				onDept.value = true
				oneDept.value = false
				isDept.value = false
			} else {
				onDept.value = false
			}
		}
	} else {
		if (deptHide.value) {
			onDept.value = true
			oneDept.value = true
		} else {
			onDept.value = false
		}
	}
})
</script>
<style lang="less">
.personal-center-container {
	width: 100vw;
	.van-cell-tit {
		overflow: visible;
		position: static;
		.van-cell__value {
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			width: 210px;
		}
	}
	.outside-label {
		text-align: center;
		padding: 2px 4px;
		width: 70px;
		height: 18px;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 15px;
		color: #ffffff;
		background: #4c78fc;
		border-radius: 2px;
	}
	.current-department {
		margin: 12px 0;
		background: #fff;
		.van-cell__value {
			min-width: 30%;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.org-id {
			vertical-align: middle;
		}
	}
	.personal-detail {
		margin-bottom: 16px;
		.personal-detail__department {
			.van-cell__title {
				min-width: 70%;
				text-align: left;
			}
			/* .van-cell__value {
			min-width: 30%;
		} */
		}

		.cell-value {
			flex: none;
		}
		ul {
			li {
				display: flex;
				align-items: flex-start;
				margin-top: 8px;
				width: calc(100vw - 30px);
				.xingzheng {
					text-align: center;
					padding: 2px 4px;
					height: 18px;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 12px;
					line-height: 15px;
					color: #ffffff;
					background: #ff9801;
					border-radius: 2px;
					min-width: 70px;
					display: inline-block;
					margin-right: 5px;
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
				}
				.yewu {
					white-space: nowrap;
					overflow: hidden;
					text-overflow: ellipsis;
					text-align: center;
					padding: 2px 4px;
					min-width: 70px;
					margin-right: 5px;
					display: inline-block;
					height: 18px;
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 400;
					font-size: 12px;
					line-height: 15px;
					color: #ffffff;
					background: #5abb3c;
					border-radius: 2px;
				}
			}
		}
		.outside-org-list {
			li {
				display: flex;
				justify-content: space-between;
				flex-direction: column;
				> div {
					display: flex;
					width: 350px;
					justify-content: space-between;
					.org-id {
						font-family: 'PingFang SC';
						font-style: normal;
						font-weight: 400;
						font-size: 12px;
						line-height: 22px;
						color: #646a73;
					}
				}
			}
		}
		.department-content {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 14px;
			color: #646a73;
			display: inline-block;
			width: 350px;
			line-height: 16px;
			height: 16px;
		}
		.a1 {
			overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
			width: 85%;
		}
		.orgType {
			background: #ebf1ff;
			border-radius: 12px;
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 12px;
			line-height: 100%;
			color: #4c78fc;
			padding: 4px;
			box-sizing: border-box;
			margin-left: 6px;	
			}
		&__basic {
			margin-bottom: 12px;
		}
		&__department {
			margin-bottom: 12px;
		}
	
	}
	.van-popup {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		.van-picker {
			width: 80%;
			margin: 0 auto;
		}
		h1 {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 18px;
			line-height: 24px;
			text-align: center;
			color: #1f2329;
			margin-top: 15px;
			margin-bottom: 20px;
		}
		.btn {
			background: #4c78fc;
			border-radius: 4px;
			height: 48px;
			width: 80%;

			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 500;
			font-size: 16px;
			line-height: 48px;
			color: #fff;
			text-align: center;
			margin: 24px auto 12px;
		}
	}
}

.personal-detail__department {
	.van-cell__title,
	.van-cell__value {
		flex: 3;
	}
}
</style>
